<template>
    <el-dialog
        :visible.sync="dialogVisible"
        :show="show"
        :width="defaultWd"
        :center="center"
        :close-on-click-modal="closeModal"
        :close-on-press-escape="closeEscape"
        :before-close="handleClose"
        :modal-append-to-body="toBody"
        @close="handleCancel">
        <span slot="title">
            <slot name="title">
                {{title || '提示'}}
            </slot>
        </span>
        <span slot="footer">
            <slot name="footer">
                <el-button type="primary" @click="handleSave">确 定</el-button>
                <el-button @click="handleCancel">取 消</el-button>
            </slot>
        </span>
        <slot></slot>
    </el-dialog>
</template>

<script>
    export default {
        name: '',
        props: ['show', 'noEsc', 'noModal', 'width', 'center', 'toBody', 'title'],
        data() {
            return {
                dialogVisible: this.show,
                closeEscape: (this.noEsc === undefined) ? true : this.noEsc,
                closeModal: (this.noModal === undefined) ? true : this.noModal,
                defaultWd: this.width || '30%'
            }
        },
        watch: {
            show(val) {
                this.dialogVisible = this.show
                if (!val) {
                    this.$emit('update:show', false)
                }
            }
        },
        mounted() {
        },
        methods: {
            handleClose(done) {
                this.$emit('update:show', false)
                done()
            },
            handleCancel() {
                this.$emit('update:show', false)
                this.$emit('cancel')
            },
            handleSave() {
                this.$emit('save')
            }
        },
        components: {}

    }
</script>

<style scoped lang="less">

</style>
